<script setup>
import {ref,reactive,onMounted} from "vue"
import SwiperSlideDefaultTemplate from '@/components/SwiperSlideDefaultTemplate/index.vue'
import JcFooter from '@/components/JcFooter/index.vue'

let mapContainer = ref() // 地图组件容器
let endLngLat = [114.313539, 23.018521] // 终点坐标
function initMap(){
  AMapLoader.load({
    key: "4ae3287ff62cee23266126b6c8085e73", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
  .then((AMap) => {
    const map = new AMap.Map(mapContainer.value,{
      viewMode: '2D', //默认使用 2D 模式
      zoom: 11, //地图级别
      center: endLngLat, //地图中心点
    });


    //   定位信息窗口显示
    let content = [
        "<div><b>惠州京城贸易</b>",
        "电话: 037-1265365  邮编: 100102",
        "地址: 惠州市惠城区金融大厦25层101室</div>"
    ]

    /*创建infoWindow实例*/
    let infoWindow = new AMap.InfoWindow({
      content:content.join("<br>")
    })
    infoWindow.open(map,map.getCenter())

    /* 绘制路线规划 */
    // AMap.plugin("AMap.Driving", function () {
    //   var driving = new AMap.Driving({
    //     policy: 0, //驾车路线规划策略，0是速度优先的策略
    //     map: map,
    //     //panel 指定将结构化的路线详情数据显示的对应的 DOM 上，传入值需是 DOM 的 ID
    //     panel: mapContainer.value,
    //   });
    //   var startLngLat = [116.379028, 39.865042]; //起始点坐标
    //   driving.search(startLngLat, endLngLat, function (status, result) {
    //     //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
    //     //查询成功时，result 即为对应的驾车导航信息
    //     console.log('status',status)
    //     if(status === 'complete'){
    //       console.log('查询规划路线结果',result)
    //     }
    //   })
    // })

  })
  .catch((e) => {
    //加载错误提示
    console.log('出错误了',e)
  });
}

onMounted(() => {
  initMap()
})


</script>
<template>
  <SwiperSlideDefaultTemplate :is-width="false">
    <div class="swiper-slide-five">
      <div class="swiper-slide-four-content">
        <div class="five-main jc-center-width">
          <div class="five-left">
            <div class="five-title-box">
              <h1 class="five-title">联系我们</h1>
              <div class="fix"></div>
            </div>
            <div class="five-address-desc">
              <div class="five-address-top address-text">
                项目合作,留下您的联系方式
              </div>
              <div class="address-text">
                加入我们,成功JCMYer
              </div>
            </div>
          </div>
          <div class="address-map">
            <div class="map-address-dom" ref="mapContainer"></div>
          </div>
        </div>
        <JcFooter :show-contact="false" :show-driver="false"></JcFooter>
      </div>
    </div>
  </SwiperSlideDefaultTemplate>
</template>
<style lang="scss" scoped>
.swiper-slide-five {
  padding-top: var(--jc-header-height);
  width: 100%;
  height: 100%;
  background-color: var(--jc-page-color);
  .swiper-slide-four-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .five-main {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      //width: 100%;
    }
    .five-left {
      width: 50%;
      .five-address-desc {
        .address-text:not(:last-child) {
          margin-bottom: 32px;
          font-size: 20px;
          line-height: 20px;
          letter-spacing: 2px;
        }
      }
    }
    .five-title-box {
      display: flex;
      align-items: center;
      margin-bottom: 48px;
      .five-title {
        font-size: 56px;
        letter-spacing: 6px;
        text-align: justify;
        line-height: 80px;
      }
      .fix {
        margin-left: 30px;
        width: 64px;
        height: 12px;
        background: #e40011;
        border-radius: 1px;
      }
    }
    .address-map {
      width: 50%;
      height: 521px;
      background: #ececec;
      border-radius: 12px;
      overflow: hidden;
      .map-address-dom {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
